<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /* 
    1、静态布局：网页上所有元素的尺寸一律使用px做单位
    2、流式布局：网格布局  100%作为单位
    3、自适应布局：@media媒体查询
    4、响应式布局： 媒体查询 + 流式布局 + 静态布局
    5、em/rem布局
    6、弹性布局：flex布局
    7、圣杯布局(双飞翼布局)：左右固定，中间自定义
      1、flex布局 + flex-grow:1;
      2、浮动   计算属性calc()   float:left;  calc(100% - 400px)  运算符左右两边是空格
      3、定位   中间盒子设置左右内边距：padding:0 200px
    */
</script>
</html>